<template>
  <div class="newmusic">
    <div class="title" title="更多音乐">
      <i
        class="iconfont icon-circleyuanquan"
        :style="{ color: themeColor }"
      ></i>
      <h3 style="margin-left: 0.625rem" @click="toNewMusic">最新音乐</h3>
      <i class="el-icon-arrow-right" @click="toNewMusic"></i>
    </div>
    <div class="newmusic-box">
      <div
        class="newmusic-item"
        v-for="(item, index) in newsongs"
        :key="item.id"
        @dblclick="playmusic(item)"
      >
        <span class="num">{{ index + 1 }}</span>
        <div class="img">
          <el-image :src="item.pic"></el-image>
          <i
            class="iconfont icon-bofang"
            @click="playmusic(item)"
            :style="{ color: themeColor }"
          ></i>
        </div>
        <div class="right-name">
          <p class="name" :title="item.name" @click="playmusic(item)">
            <span>{{ item.name }}</span>
            <i
              class="iconfont icon-MV"
              title="播放MV"
              v-if="item.mv !== 0"
              :style="{ color: themeColor }"
              @click.stop="toMvDetails(item.mv)"
            ></i>
          </p>
          <span
            class="singerName"
            :title="item.song"
            @click.stop="toSingerdetails(item.aliasId)"
            >{{ item.song }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getNewsong } from "@/api/music.js";
export default {
  name: "NewMusic",
  components: {},
  props: {
    themeColor: {
      type: String
    }
  },
  data() {
    return {
      newsongs: []
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getNewsong();
  },
  mounted() {},
  methods: {
    async getNewsong() {
      const data = await getNewsong();
      data.data.result.forEach(val => {
        let obj = {
          id: val.song.id,
          name: val.song.name,
          album: val.song.album.name,
          song: val.song.artists[0].name,
          song2: val.song.artists.lenght >= 2 ? val.song.artists[1].name : "",
          song3: val.song.artists.lenght >= 3 ? val.song.artists[2].name : "",
          song4: val.song.artists.lenght >= 4 ? val.song.artists[3].name : "",
          aliasId: val.song.artists[0].id,
          aliasId2: val.song.artists.lenght >= 2 ? val.song.artists[1].id : "",
          aliasId3: val.song.artists.lenght >= 3 ? val.song.artists[2].id : "",
          aliasId4: val.song.artists.lenght >= 4 ? val.song.artists[3].id : "",
          pic: val.song.album.blurPicUrl,
          mv: val.song.mvid,
          alia: val.song.alias.length !== 0 ? `(${val.song.alias[0]})` : "",
          albumId: val.song.album.id,

          time: dayjs(val.song.bMusic.playTime).format("mm:ss")
        };
        this.newsongs.push(obj);
      });
    },
    playmusic(playinfo) {
      this.$store.commit("setplaylist", this.newsongs);
      this.$store.commit("setContent", playinfo);
    },
    // 跳转单曲详情
    // toMusicdetails(id) {
    //   this.$router.push({
    //     path: "/musicdetails",
    //     query: {
    //       id
    //     }
    //   });
    // },
    // 跳转歌手详情
    toSingerdetails(id) {
      this.$router.push({
        path: "/singerdetails",
        query: {
          id
        }
      });
    },
    toNewMusic() {
      this.$router.push({
        name: "newmusic"
      });
    },
    toMvDetails(id) {
      this.$router.push({
        name: "mvdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.newmusic {
  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 3.125rem;
    margin: 0;
    font-size: 1.125rem;
    cursor: pointer;
    .el-icon-arrow-right {
      cursor: pointer;
    }
  }

  .newmusic-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.875rem;

    .newmusic-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      width: 49%;
      height: 5.625rem;
      box-sizing: border-box;
      padding: 0.3125rem 0.625rem;
      cursor: pointer;
      margin-bottom: 1.875rem;
      .num {
        width: 1.25rem;
        height: 1.25rem;
        text-align: center;
      }

      .img {
        position: relative;
        width: 5rem;
        height: 5rem;
        margin: 0 0.9375rem;
        border-radius: 0.3125rem;
        .el-image {
          height: 100%;
          width: 100%;
          border-radius: 0.3125rem;
        }

        .icon-bofang {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 1.25rem;
          color: #fff;
        }
      }
      .right-name {
        .name {
          margin-bottom: 2.1875rem;

          .icon-MV {
            margin-left: 0.3125rem;
            font-size: 1.5rem;
            vertical-align: middle;
            color: red;
          }
        }
        // .singerName {
        // padding: 0 0.625rem;
        // }
        .singerName:hover {
          text-decoration: underline;
        }
        .name span:hover {
          text-decoration: underline;
        }
      }
    }

    .newmusic-item:hover {
      background: rgba($color: #dddddd, $alpha: 0.5);
      color: #000;
    }
  }
}
</style>
